<template>
    <div class="progress-circle">
        <svg preserveAspectRatio="xMinYMin meet" viewBox="0,0,100,100">
            <circle fill="#FFFFFF" cx="50" cy="50" r="44"/>
            <path fill="transparent" stroke-width="6" stroke-linecap="round"
                  d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94"
                  :stroke="color"
                  :stroke-dasharray="l"
                  :stroke-dashoffset="offset"
                  style="transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;"
            />
        </svg>
        <strong class="number tc" :style="`color: ${color}`">{{ this.show }}</strong>
        <span class="percent tc" :style="`border: 1px solid ${color}`">{{ this.per }}</span>
    </div>
</template>

<script>
    export default {
        name: 'progressCircle',
        data() {
            return {
                /**
                 * 虚线开始的偏移量
                 * 通过偏移量控制百分比显示
                 * 逆时针偏移
                 * 默认为周长l，等价于0%
                 * 最小值为0，等价于0%
                 */
                offset: 2 * Math.PI * 47
            }
        },
        props: {
            /**
             * 总量和显示量,
             * 颜色
             */
            all: {
                type: [String, Number],
                default: 100
            },
            show: {
                type: [String, Number],
                default: 33
            },
            color: {
                type: [String],
                default: 'red'
            },
        },
        computed: {
            //圆的周长
            l() {
                return 2 * Math.PI * 47
            },
            per() {
                if(this.all * 1 === 0){
                    return '0%'
                }
                return (this.show / this.all * 100).toFixed(0) + '%'
            }
        },
        mounted() {
            this.offset = 2 * Math.PI * 47 * (1 - this.show / this.all)
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../assets/css/color";

    $back: #ddd;
    .progress-circle {
        width: 1.1rem;
        height: 1.1rem;
        background: $back;
        border-radius: 50%;
        box-sizing: border-box;
        position: relative;
        .number {
            position: absolute;
            top: 32%;
            width: 0.4rem;
            left: 50%;
            margin-left: -0.2rem;
            font-size: 0.25rem;
        }
        .percent {
            position: absolute;
            top: 60%;
            left: 50%;
            margin-left: -0.2rem;
            width: 0.4rem;
            height: 0.16rem;
            line-height: 0.16rem;
            border-radius: 0.08rem;
        }
    }
</style>
